<style type="text/css">
    .layui-layer-rim{
        border:6px solid #2e8ded;
        background:#fff;
        box-shadow:0 0 3px rgba(0,0,0,.4);
    }
    .layui-layer-rim .layuiCon{
        padding:20px;
        font-size:32px;
        text-align:center;
    }

    .bx-wrapper {
        position: relative;
        padding: 0;
        *zoom: 1;
    }
    .bx-wrapper .bx-viewport {
        -moz-box-shadow: 0 0 5px #ccc;
        -webkit-box-shadow: 0 0 5px #ccc;
        box-shadow: 0 0 5px #ccc;
        -webkit-transform: translatez(0);
        -moz-transform: translatez(0);
        -ms-transform: translatez(0);
        -o-transform: translatez(0);
        transform: translatez(0);
    }
    .bx-wrapper .bx-controls-auto {
        position: absolute;
        bottom: -30px;
        width: 100%;
    }
    .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
        display: inline-block;
        *zoom: 1;
        *display: inline;
    }
    .bx-wrapper .bx-prev {
        left: 10px;
        background: url(images/controls.png) no-repeat 0 -32px;
    }
    .bx-wrapper .bx-next {
        right: 10px;
        background: url(images/controls.png) no-repeat -43px -32px;
    }
    .bx-wrapper .bx-prev:hover {
        background-position: 0 0;
    }
    .bx-wrapper .bx-next:hover {
        background-position: -43px 0;
    }
    .bx-wrapper .bx-controls-direction a {
        position: absolute;
        top: 50%;
        margin-top: -16px;
        outline: 0;
        width: 32px;
        height: 32px;
        text-indent: -9999px;
        z-index: 9999;
    }
    .bx-wrapper .bx-controls-auto {
        text-align: center;
    }
    .bx-wrapper .bx-controls-auto .bx-start {
        display: block;
        text-indent: -9999px;
        width: 10px;
        height: 11px;
        outline: 0;
        background: url(images/controls.png) -86px -11px no-repeat;
        margin: 0 3px;
    }
    .bx-wrapper .bx-controls-auto .bx-start:hover,
    .bx-wrapper .bx-controls-auto .bx-start.active {
        background-position: -86px 0;
    }
    .bx-wrapper .bx-controls-auto .bx-stop {
        display: block;
        text-indent: -9999px;
        width: 9px;
        height: 11px;
        outline: 0;
        background: url(images/controls.png) -86px -44px no-repeat;
        margin: 0 3px;
    }
    .bx-wrapper .bx-controls-auto .bx-stop:hover,
    .bx-wrapper .bx-controls-auto .bx-stop.active {
        background-position: -86px -33px;
    }
    .bx-wrapper .bx-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        background: #666\9;
        background: rgba(80, 80, 80, 0.75);
        width: 100%;
    }
    .bx-wrapper .bx-caption span {
        color: #fff;
        font-family: Arial;
        display: block;
        font-size: .85em;
        padding: 10px;
    }
</style>
<script type="text/javascript" src="views/parkLotCenter/centralizedMonit/js/chargeMonit.js"></script>
<script id="Back" language=javascript></script>
<script type="text/javascript">
    var chargeMonit = null;
    $(document).ready(function() {
        chargeMonit = new ChargeMonit($('#ChargeMonitDiv'));
    });
</script>
<div class="basicInfoContent-panel" id="ChargeMonitDiv" style="width:100%;height:100%;">

    <div class="collectFee" style="height:156px">
        <div class="total" id="total">
        </div>
        <div class="slider1 policeBox" id="policeBox">
        </div>
    </div>
    <div class="chargingMonitor" style="height:calc(100% - 168px);">
        <div class="tableDiv" style="width:600px;float:left;height:100%;overflow-y:auto;" data-bind="source: chargingGrid" id="tableDiv">
        </div>
        <div class="aisleFrame" id="aisleFrame" style="height:100%;overflow-y:auto;">
        </div>
    </div>
</div>
